<template>
	<view class="van-picker-wrapper">
		<view class="van-picker-name" @click="showPicker = true">
			<view class="value" v-if="value">{{ options.find(x => x.value == value) ? options.find(x => x.value == value)['text' + En] : '' }}</view>
			<view class="placeholder" v-else :placeholder="placeholder">{{ placeholder }}</view>
			<img class="icon" src="https://static.inclusionconf.com/static/images/chat/select-bottom.png" alt="" />
		</view>
		<view class="van-picker-content" v-if="showPicker" @click="showPicker = false">
			<view class="van-picker" @click.stop>
				<div class="video-mask-title">
					<view class="cancel" @click="showPicker = false">{{ $t('secdetail3') }}</view>
					{{ title }}
					<view class="save" @click="save">{{ $t('secdetail2') }}</view>
				</div>
				<picker-view :value="val" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in options.map(x => x['text' + En])" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			},
			options: {
				type: Array,
				default () {
					return []
				}
			},
			showInput: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				val: [0],
				text: '',
				showPicker: false
			}
		},
		created() {

		},
		watch: {
			value: {
				handler(v) {
					console.log(v, 8888)
				},
				immediate: true
			}
		},
		methods: {
			bindChange(v) {
				this.val = v.detail.value
			},
			save() {
				this.showPicker = false
				this.$emit('input', this.options[this.val[0]].value)
			}
		}
	}
</script>

<style lang="less" scoped>
	.van-picker-wrapper {

		.van-picker-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 44px;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			padding: 0 12px;

			.placeholder {
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 30rpx;
				color: #989898;
				line-height: 32rpx;
				text-align: right;
				font-style: normal;
			}

			.value {
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 30rpx;
				color: #00260F;
				line-height: 32rpx;
				text-align: right;
				font-style: normal;
			}

			.icon {
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
			}
		}
	}

	.van-picker-content {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.60);
		display: flex;
		align-items: flex-end;
		z-index: 999999;
	}

	.van-picker {
		width: 100%;
		height: 750rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.video-mask-title {
		font-family: MiSans, MiSans;
		font-weight: 500;
		font-size: 32rpx;
		color: #00260F;
		line-height: 32rpx;
		text-align: center;
		font-style: normal;
		position: relative;
		margin-bottom: 65rpx;
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-bottom: 1px solid #E0E0E0;

		.cancel {
			font-family: MiSans, MiSans;
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			padding: 32rpx;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.save {
			font-family: MiSans, MiSans;
			font-weight: 400;
			font-size: 32rpx;
			color: #28DC9B;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			padding: 32rpx;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.text-input {
		width: 620rpx;
		height: 100rpx;
		background: rgba(204, 204, 204, 0.2);
		border-radius: 50rpx;
		padding-left: 30rpx;
		margin: -20rpx auto 30rpx;
		font-size: 28rpx;
		line-height: 100rpx;
	}


	.home-video-foot {
		width: 100%;
		height: 106rpx;
		z-index: 1;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.home-detail-foot-wrapper {
			padding-left: 28rpx;
			padding-right: 28rpx;
			padding-top: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.foot-btn {
				width: 650rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #2A8FFF 0%, #003FE4 100%);
				border-radius: 48rpx;
				margin: 0 auto;
				font-family: MiSans, MiSans;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 45rpx;
				text-align: center;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.picker-view {
		flex: 1;
		width: 100%;

		.item {
			font-size: 14px;
			line-height: 80rpx;
			color: #000;
			text-align: center;
		}
	}

	.picker-title {
		display: flex;
		padding: 5px 10px;
		justify-content: space-between;

		span {
			padding: 5px 10px;
		}
	}
</style>